<template>
	<view>
		<cu-custom bgColor="bg-white"><block slot="backText">返回</block><block slot="content">分类</block></cu-custom>
		
		<view>
		<viwe v-for="(item,index) in category" :key="index">
	
		<!-- 一级分类 -->	
		<view v-if="item.child.length== 0" class="flex flex-wrap margin bg-white radius" @tap="goCategory" :data-id="item.id" >
			<image :src="item.pic" class="radius" mode="aspectFill" style="width: 250rpx;height: 250rpx;"></image>
			<view class="padding-left">
				<view class="text-bold text-black text-xl text-cut  " style="width: 400rpx;">{{item.name}}</view>
				<view class="padding-tb-sm text-bold text-three-cut " style="width: 400rpx;height: 140rpx;">{{item.intro}}</view>
				<view class="padding-tb-sm text-bold ">{{item.post_num}}篇内容</view>
			</view>
		</view>
		
		<!-- 二级分类 -->
		<view v-if="item.child.length > 0">
			<view class="flex justify-between margin">
				<view class="text-bold text-lg">
					<view><span class="text-red">{{item.name}}</span></view>
					<view class="text-gray text-sm">{{item.intro ? item.intro:'category'}}</view>
					</view>
				<view class="text-red text-sm">More+</view>
			</view>
			<view class="flex flex-wrap margin">
				<view v-for="(i,k) in item.child">
					<view class="margin-right margin-bottom-sm bg-white radius">
					<image :src="i.pic" class="radius" mode="aspectFill" style="width: 200rpx;height: 250rpx;"></image>
					<view class="padding-sm text-bold text-black">{{i.name}}</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
		
		
		
		
		
	</viwe>

		</view>
		<maoeu-loading ref="loading"></maoeu-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				category:[]
			}
		},
		onLoad() {
			this.getCategory();
		},
		methods: {
			
			getCategory:function(){
				
				const _this = this;
				_this.$apiResquest({
					url: 'cms/category',
					method: 'GET'
				}).then(function(res) {
				
					
					_this.category = res.data
					_this.$refs.loading.closeLoading()
					
				
				})
			},
			// 跳转分类列表
			goCategory: function(e) {
				console.log(e)
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '../posts/posts?id='+id
				})
			},
		}
	}
</script>

<style>
	page{
		
	}
	.text-three-cut{
		text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 3;
		  line-clamp: 3;
		  -webkit-box-orient: vertical;
	}
</style>
